<template>
    <div>
      <vue-ueditor-wrap  v-model="myValue" :config="myConfig"></vue-ueditor-wrap>
    </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

// 富文本

export default {
    name: 'ueditorWrap',
    data() {
        return {
          myValue: this.value,
          myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 250,
                // 初始容器宽度
                initialFrameWidth: '99.5%',
                // 关闭自动保存
                enableAutoSave: false,
                // 如果需要上传功能,找后端小伙伴要服务器接口地址
                serverUrl: '/api/ueditor/config',
                // 你的UEditor资源存放的路径,相对于打包后的index.html
                UEDITOR_HOME_URL: 'utils/UEditor/',
                headers: {
                  access_token: 'token'
                },
                // // 自定义工具栏，需要额外选项可以参考ueditor.config.js
                // toolbars: [
                //   [
                //     'fullscreen', 'source', '|',
                //     'bold', 'italic', 'underline', '|', 'fontsize', 'fontfamily', '|', 'kityformula', 'preview', '|',
                //     'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|','touppercase', 'tolowercase', '|',
                //     'link', 'unlink', 'anchor', '|',
                //     'simpleupload','attachment','emotion', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
                //     'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                //     'inserttable', '|',
                //     'print', 'searchreplace', 'drafts', 'help'
                //   ]
                // ]
          }
        };
    },
    props: {
        value: {
            type: String,
            default: ""
        },
    },
    
    watch: {
        value(newValue) {
            this.myValue = newValue;
        },
        myValue(newValue) {
            this.$emit("input", newValue);
        }
    },
    components: { VueUeditorWrap }
};
</script>

<style lang='scss' scoped>

</style>
